<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07学子F2右侧卡片</title>
    <style>
        .card {
            width: 198px;
            height: 233px;
            background-color: #e8e8e8;
            /*卡片中所有的文字字号都是12px像素，可以设置给卡片，只设置一次就好*/
            font-size: 12px;
        }
        .card>p {
            /*p元素有自带的外间距，可以去掉*/
            margin: 0;
        }
        .card>.p_intro {
            font-weight: lighter;
            text-align: center;
        }
        .card>.p_price {
            color: #0aa1ed;
            /*字体字重*/
            font-weight: bold;
            margin: 6px;
            text-align: center;
        }
        .card>a {
            /*行内元素需要设置为块级元素才能设置大小*/
            display: block;
            width: 100px;
            height: 24px;
            background-color: #0aa1ed;
            color: white;
            text-decoration: none;
            /*文字水平居中*/
            text-align: center;
            /*行高与块级一样高，才能实现单行文本垂直方向居中*/
            line-height: 24px;
            /*块级元素水平居中 浏览器自动将块级元素的左右外间距计算成等值*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="img/computer3.png" alt="">
        <p class="p_intro">戴尔(DELL)XPS13-9360-R1609 13.3英<br>寸微边框笔记本电脑</p>
        <p class="p_price">￥4600.00</p>
        <a href="#">查看详情</a>
    </div>
</body>
</html>